<template>
	<view class="box-detail">
		<view class="item-index-top">
			<view class="item-top-text">洽谈信息</view>
		</view>
		<view class="box-detail-content border-wid" v-if="!sendDataList.length">
			<view class="box-detail-content-item">
				<view class="row-title">洽谈日期</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">政府方参会人员</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">第三方参会人员</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">跟进团队参会人员</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">洽谈内容</view>
				<view class="row-content">无</view>
			</view>
			<view class="box-detail-content-item">
				<view class="box-detail-content-item">
					<view class="row-title">附件</view>
					<view class="row-content">无</view>
				</view>
			</view>
		</view>
		<view class="box-detail-content border-wid" v-else v-for="item,index in sendDataList" :class="{'border-wid':(sendDataList.length-1) == index}" :key="index" >
			<view class="box-detail-content-item">
				<view class="row-title">洽谈日期</view>
				<uni-datetime-picker class="form-picker" type="date" :value="item.DISCUSS_DATE" start="2000-2-31" end="2050-12-30" @change="dateChange(index,$event)"></uni-datetime-picker>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">政府方参会人员</view>
				<input class="uni-input form-input" v-model="item.PLACE" name="input" placeholder="请输入政府方参会人员"/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">第三方参会人员</view>
				<input class="uni-input form-input" v-model="item.INVEST_MEMBER" name="input" placeholder="请输入第三方参会人员"/>
			</view>
			<view class="box-detail-content-item" @tap="toPersonList(index)">
				<view class="row-title">跟进团队参会人员</view>
				<textarea class="uni-input form-input" v-model="item.MEMBER_NAME" name="input" placeholder="请输入跟进团队参会人员" disabled=""/>
			</view>
			<view class="box-detail-content-item">
				<view class="row-title">洽谈内容</view>
				<textarea class="uni-input form-input" v-model="item.CONTENT" name="input" placeholder="请输入洽谈内容"/>
			</view>
			<!-- <view class="box-detail-content">
				<view class="box-detail-content-item">
					<view class="row-title">附件</view>
					<view class="box-attach-row" >
						<image src="../../../../static/images/icon_enclosure.png" mode="widthFix" class="box-attach-icon"></image>
						<text class="box-attach-name" @click="popOpen">点击上传</text>
					</view>
				</view>
				<view class="box-detail-content-item" v-for="ites,idx in item.file" :key="idx">
					<view class="row-title"></view>
					<view class="row-content box-attach-row">
						<image src="../../../../static/images/icon_enclosure.png" mode="" class="box-attach-icon"></image>
						<text class="box-attach-name">{{ ites.fileShowName||"无"}}</text>
					</view>
				</view>
			</view> -->
			<view class="delete-item-work" @click="deleteItemTwo(index)"></view>
		</view>
		<view class="add-box-detail-content" @click="addItem()"></view>
		<new-file/>
	</view>
</template>

<script>
	import newFile from './new_file.vue'
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import pop from "@/components/ming-pop/ming-pop.vue"
	export default {
		components: {
			pop,
			mpvuePicker,
			newFile
		},
		data(){
			return{
				themeColor: '#007AFF',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [3],
				pickerValueArray:[],
				
				queryFormData:{
					name:'',  //文档名称
					directory:'', //文档目录
					code:'',
					date: new Date(),//项目启动时间
					operator:'', //负责人
					tags:'', //标签
					sealFlag:0, //是否盖章
					sealType:1, //是否由综合部存档
					remark:''
				},
				direction: "center",
				code:'',
				sendDataList:[],
				deletetDataList:[],
				projectId:'',
				date: new Date(),
				fileListDataOne:[],
				fileListDataTwo:[]
			}
		},
		props: {
			pageData: {
				type: Object,
				default(){
					return {}
				}
			},
			changeListData:{
				type: Object,
				default(){
					return {}
				}
			}
		},
		watch:{
			pageData(){
				if(this.pageData.dataGrid['Discuss_view'].datas.length){	
					this.sendDataList=[]
					this.pageData.dataGrid['Discuss_view'].datas.map(item=>{
						this.projectId=item.PROJ_ID
						this.sendDataList.push({
							datakey:item.DATAKEY,
							proid:item.PROJ_ID,
							DISCUSS_DATE:item.DISCUSS_DATE,//洽谈日期
							PLACE:item.PLACE,//政府方参会人员
							INVEST_MEMBER:item.INVEST_MEMBER,//第三方参会人员
							MEMBER_NAME:item.MEMBER_NAME,//跟进团队参会人员
							TEAM_MEMBER:item.TEAM_MEMBER,//跟进团队参会人员code
							CONTENT:item.CONTENT, //洽谈内容 
							file:item.file,
							leixing:2,//操作类型  0未改变，1新增，2修改，3删除
						})
					})
				}else{
					this.sendDataLista=[]
				}
			},
		},
		methods:{
			popOpen(e) {
				this.direction = e.currentTarget.dataset.id;
				//打开弹窗
				this.$refs.pop.show();
			},
			showSinglePicker(num) {
				let dataArry=[]
				this.pickerValueArray=[]
				// this.changeListData.laiyuanList文件列表
				if(this.changeListData.laiyuanList){
					dataArry=this.changeListData.laiyuanList
					 this.$refs.mpvuePicker1.show()
				}
				
				dataArry.map(item=>{
					this.pickerValueArray.push(
						{
							label: item.CODE_NAME,
							value: item.CODE
						}
					)
				})
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				
			},
			onConfirm1(e) {
				console.log(e.value[0])
				this.sendData.laiyuan= e.label
			    this.sendData.laiyuan_value= e.value[0]
			},
			onCancel(e) {
			    console.log(e)
			},
			addItem(){
				this.sendDataList.push({
					datakey: this.getUUID(),
					proid:this.projectId,
					DISCUSS_DATE:'',//洽谈日期
					PLACE:'',//政府方参会人员
					INVEST_MEMBER:'',//第三方参会人员
					MEMBER_NAME:'',//跟进团队参会人员
					TEAM_MEMBER:'',//跟进团队参会人员code
					CONTENT:'', //洽谈内容 
					leixing:1,//操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
				})
			},
			deleteItemTwo(index){
				if(index===0&&this.sendDataList.length===1){
					this.sendDataList=[]
				}else{
					const sendWorkData=this.sendDataList
					if(sendWorkData[index].leixing===0){
						this.deletetDataList.push({
							datakey: sendWorkData[index].DATAKEY,
							proid: sendWorkData[index].PROJ_ID,
							DISCUSS_DATE: sendWorkData[index].DISCUSS_DATE,//洽谈日期
							PLACE: sendWorkData[index].PLACE,//政府方参会人员
							INVEST_MEMBER: sendWorkData[index].INVEST_MEMBER,//第三方参会人员
							MEMBER_NAME: sendWorkData[index].MEMBER_NAME,//跟进团队参会人员
							TEAM_MEMBER: sendWorkData[index].TEAM_MEMBER,//跟进团队参会人员code
							CONTENT: sendWorkData[index].CONTENT, //洽谈内容 
							file: sendWorkData[index].file,
							leixing:3,//操作类型  新增行标记为1，删除行标记为3，修改行不处理保留原值0
						})
						this.sendDataList.splice(index,1)
					}else if(this.sendDataList[index].leixing===1){
						this.sendDataList.splice(index,1)
						
					}
				}
			},
			dateChange(index,e) {
				this.sendDataList[index].DISCUSS_DATE=e 
			},
			toPersonList(index) {
				this.$emit('getIndex',{dataList:this.sendDataList,index:index,num:5})
				uni.navigateTo({
					url: '../../selectList/person'
				})
			},
			uploadFiles(num){
				if(num===1){
					this.$util.upload('_XGFJ','PPP_T_BUS_PROJ.XGFJ',(data)=>{
						if(data){
							this.fileListDataOne.push({
								...data[0],fileShowName:data[0].name
							})
						}
					})
				}else{
					this.$util.upload('_XGFJ','PPP_T_BUS_PROJ.XGFJ',(data)=>{
						if(data){
							this.fileListDataTwo.push({
								...data[0],fileShowName:data[0].name
							})
						}
					})
				}
				
			},
			getUUID() {
			   var s = [];
			   var hexDigits = "0123456789abcdef";
			   for (var i = 0; i < 36; i++) {
			    s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
			   }
			   s[14] = "4"; 
			   s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); 
			   s[8] = s[13] = s[18] = s[23] = "";
			
			   var uuid = s.join("");
			   return uuid;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrap{
		padding-bottom: 60rpx;
	}
	page{
		padding-bottom: 20rpx;
	}
	
	.delete-item-work{
		width:54rpx;
		height: 54rpx;
		background: url(../../../../static/images/icon_del.png);
		background-size:36rpx 36rpx ;
		background-repeat: no-repeat;
		background-position:18rpx 0;
		position: absolute;
		z-index: 100;
		top: 0;
		right: 0;
	}
	.box-detail {
		min-height: 760rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin: 20rpx;
		padding: 26rpx 30rpx 50rpx 30rpx;
	}
	.item-index-top{
		// width: 650rpx;
		height: 40rpx;
		// margin: 20rpx 20rpx 18rpx 20rpx;
		background-color: #0099cc;
		border-radius: 10rpx;
		.item-top-text{
			font-family: AlibabaPuHuiTi-Regular;
			padding-left: 20rpx;
			font-size: 26rpx;
			font-weight: normal;
			line-height: 40rpx;
			letter-spacing: 0px;
			color: #ffffff;
		}
	}
	.item-top{
		display: flex;
		justify-content: space-between;
		.setion-left{
			display: flex;
			flex-direction: column;
			.left-text-top{
				font-size: 30rpx;
				font-weight: 600;
				color: #414a5d;
			}
			.left-text-bot{
				margin-top: 22rpx;
				font-size: 26rpx;
				color: #7f7f7f;
			}
		}
		.setion-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.right-text-top{
				height: 30rpx;
				line-height: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				color: #9a9a9a;
			}
			.right-text-bot{
				margin-top: 22rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #999999;
			}
		}
	}
	.box-detail-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8rpx;
	
		.name {
			font-size: 30rpx;
			color: #414a5d;
			font-weight: bold;
		}
	
		.date {
			font-size: 26rpx;
			color: #9a9a9a;
		}
	}
	
	.box-net {
		font-size: 26rpx;
		color: #0099cc;
	}
	
	.box-detail-content {
		margin-top: 24rpx;
		padding: 0 10rpx;
		border-bottom: 8rpx solid #e8f0f2;
		position: relative;
	}
	// .border {
	// 	;
	// }
	.border-wid{
		border-bottom: 0
	}
	.box-detail-content-item {
		display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// justify-content: space-between;
		margin-bottom: 20rpx;
	
		.row-title {
			width: 170rpx;
			font-size: 26rpx;
			color: #9a9a9a;
			text-align: left;
			flex-shrink: 0;
			margin-right: 10rpx;
	
			&.mag {
				margin-left: 18rpx;
			}
		}
		
	
		.row-content {
			font-size: 26rpx;
			color: #414a5d;
			word-wrap: break-word;
			word-break: break-all;
			flex: 1;
			text-align: left;
	
			&.mag {
				margin-right: 18rpx;
			}
		}
	}
	
	.bar-contact {
		background-color: #0099cc;
		border-radius: 10px;
		height: 40rpx;
		line-height: 40rpx;
		padding-left: 18rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		
	}
	.box-attach{
		margin-top: 20rpx;
		padding-top: 20rpx;
		// padding: 0 10rpx;
		border-top: 1px solid #e8f0f2;
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		flex: 1;
		// padding: 0 18rpx;
		// height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			height: 40rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			flex: 1;
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.fixed-action-bar{
		width: 100%;
		display: flex;
		height: 70rpx;
		align-items: center;
		background: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		.item{
			width: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			
		}
		.icon{
			width: 30rpx;
		}
		.btn-box{
			width: 90rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 70rpx;
		}
		.text-edit{
			font-size: 24rpx;
			color: #0099cc;
			line-height: 70rpx;
		}
		.text-delete{
			font-size: 24rpx;
			color: #cc3357;
			line-height: 70rpx;
		}
	}
	.box-attach-row {
		display: flex;
		align-items: center;
		// padding: 0 18rpx;
		// height: 38rpx;
		margin-bottom: 10rpx;
		.box-attach-icon {
			width: 34rpx;
			margin-right: 30rpx;
		}
		.box-attach-name {
			font-size: 26rpx;
			color: #0099cc;
		}
	}
	.uni-input{
		font-size: 26rpx;
		color: #808080;
		// border-bottom:1px solid #dce4e6;
		flex:1;
	}
	.add-box-detail-content{
		height: 90rpx;
		background-image: url(../../../../static/images/add.png);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: 160rpx 46rpx;
		
	}
	// .border {
	// 	;
	// }
	.border-wid{
		border-bottom: 1px solid #e8f0f2
	}
	.form-picker {
		width: 400rpx;
	}
	
	.form-box{
		width: 690rpx;
		padding: 30rpx;
		.box-detail-content {
			padding: 0 10rpx;
			// margin-top: 24rpx;
			border: 0;
			// &.border {
			// 	border-bottom: 1px solid #e8f0f2;
			// }
			.box-content{
				.box-detail-content-item {
					display: flex;
					flex-direction: row;
					// justify-content: flex-start;
					// justify-content: space-between;
					margin-bottom: 20rpx;
				
					.row-title {
						width: 170rpx;
						font-size: 28rpx;
						color: #414a5d;
						text-align: left;
						flex-shrink: 0;
						margin-right: 10rpx;
				
						&.mag {
							margin-left: 18rpx;
						}
					}
					
				
					.row-content {
						font-size: 26rpx;
						color: #414a5d;
						word-wrap: break-word;
						word-break: break-all;
						flex: 1;
						text-align: left;
				
						&.mag {
							margin-right: 18rpx;
						}
					}
				}
			}
		}
		.uni-form-item{
			display: flex;
			justify-content: flex-start;
			margin-bottom: 30rpx;
		}
		.date-pick-style{
			justify-content: flex-start;
			align-items: center;
			image{
				width:36rpx;
				height: 32rpx;
			}
			.text-input-hou{
				font-size: 26rpx;
				padding: 0 100rpx 0 20rpx;
			}
		}
		.title{
			width: 170rpx;
			flex-shrink: 0;
			font-size: 28rpx;
			color: #414a5d;
		}
		.uni-input{
			font-size: 28rpx;
			color: #808080;
			border:1px solid #dce4e6;
			flex:1;
		}
		.textarea-style{
			font-size: 28rpx; 
		}
	}
</style>
